<template>
  <div class="pl">
    <div
      v-if="result"
      class="cla"
      :style="{
        'background-image': `url(${result.playlist.coverImgUrl})`,
        'background-origin': 'center center',
      }"
    ></div>
    <span class="green">歌单</span>
    <span v-if="result" class="icon"
      ><i class="fa fa-headphones" aria-hidden="true"></i
      >{{ result.playlist.playCount | formatNum(1) }}</span
    >
    <div class="songpic">
      <div class="left">
        <img v-if="result" :src="result.playlist.coverImgUrl" />
      </div>
      <div class="right">
        <h1 v-if="result">{{ result.playlist.name }}</h1>
        <div class="bottom">
          <img v-if="result" :src="result.playlist.creator.avatarUrl" />
          <h2 v-if="result">{{ result.playlist.creator.nickname }}</h2>
        </div>
      </div>
    </div>
    <div class="list">歌曲列表</div>
    <div>
      <loading v-if="songList.length == 0"></loading>
      <music-list
        v-else
        @play="$emit('play', $event)"
        :songlist="songList"
        :shownum="true"
      ></music-list>
    </div>

    <div v-if="res" v-show="res.hotComments.length == 0 ? false : true">
      <div class="list">热门评论</div>
      <loading v-if="res.hotComments.length <= 0"></loading>
      <ul v-else>
        <li
          v-for="index in res.hotComments.length"
          :key="index"
          class="list_li"
        >
          <div class="img">
            <img :src="res.hotComments[index - 1].user.avatarUrl" />
          </div>
          <div class="center">
            <h2>{{ res.hotComments[index - 1].user.nickname }}</h2>
            <p>{{ res.hotComments[index - 1].content }}</p>
          </div>
          <div class="up">
            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
            {{ res.hotComments[index - 1].likedCount }}
          </div>
        </li>
      </ul>
    </div>

    <div v-if="reg" v-show="reg.comments.length == 0 ? false : true">
      <div class="list">最新评论</div>
      <div v-if="reg">
        <loading v-if="reg.comments.length == 0"></loading>
        <ul v-else>
          <li v-for="value in reg.comments.length" :key="value" class="list_li">
            <div class="img">
              <img :src="reg.comments[value - 1].user.avatarUrl" />
            </div>
            <div class="center">
              <h2>{{ reg.comments[value - 1].user.nickname }}</h2>
              <p>{{ reg.comments[value - 1].content }}</p>
            </div>
            <div class="up">
              <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
              {{ reg.comments[value - 1].likedCount }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import MusicList from "@/components/MusicList.vue";
import Loading from "@/components/Loading.vue";
export default {
  name: "PlayList",
  props: {
    listid: [String, Number],
  },
  data() {
    return {
      songList: [],
      result: null,
      reg: null,
      res: null,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.axios.get(`/playlist/detail?id=${vm.listid}`).then((result) => {
        vm.result = result;
        let re = result.playlist.tracks.map((v, index) => {
          v.song = {
            privilege: result.privileges[index],
            artists: v.ar,
            album: v.al,
            playCount: v.pc,
          };
          return v;
        });
        vm.songList = re;
      });
      vm.axios.get(`/comment/playlist?id=${vm.listid}`).then((reg) => {
        vm.reg = reg;
      });
      vm.axios.get(`/comment/playlist?id=${vm.listid}`).then((res) => {
        vm.res = res;
      });
    });
  },
  components: {
    MusicList,
    Loading,
  },
};
</script>
<style scoped lang="less">
.pl {
  width: 100%;
  height: auto;
  padding-bottom: 50px;
}
.green {
  position: absolute;
  top: 111px;
  left: 25px;
  background-color: var(--cy-Color);
  padding: 3px 12px 4px 5px;
  color: white;
  border-radius: 0px 30px 30px 0px;
}
.icon {
  position: absolute;
  text-align: right;
  width: 70px;
  left: 70px;
  top: 25px;
  border-radius: 30px 0px 0px 30px;
  color: white;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  padding: 5px 5px 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  i {
    font-size: 16px;
    position: absolute;
    line-height: 14px;
    left: 7px;
  }
}
.cla {
  z-index: -1;
  background-size: 100% 179%;
  filter: blur(30px);
  height: 135px;
  position: absolute;
  width: 100%;
  left: 0px;
}
.songpic {
  display: flex;
  height: 170px;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  .left {
    flex: 1;
    img {
      width: 130px;
      height: 130px;
      margin: 20px;
    }
  }
  .right {
    flex: 1;
    .bottom {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-top: 30px;
      margin-left: -10px;
    }
    h1 {
      padding-top: 30px;
      margin-left: -10px;
    }
    h2 {
      font-size: 14px;
      padding: 5px;
      color: #e5e3e3;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
}
.list {
  background: #eeeff0;
  color: #666666;
  padding: 5px 0;
}
.list_li {
  display: flex;
  position: relative;
  padding: 10px;
  border-bottom: #20d59b3b 1px solid;
  .img {
    width: 30px;
    height: 30px;
    // background-color: cadetblue;
    margin: 5px 6px;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .center {
    flex: 4;
    h2 {
      padding-bottom: 12px;
      padding-top: 5px;
    }
    p {
      line-height: 15px;
      font-size: 12px;
      color: rgb(95, 95, 95);
    }
  }
  .up {
    flex: 1;
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 14px;
    color: var(--cy-Color);
  }
}
// .music {
// padding-bottom: 40px;
// }
</style>